import React, { Component } from 'react';
import './App.css';

// 1 创建 Context 跨组件传值的上下文
const ThemeContext = React.createContext();
const { Provider, Consumer } = React.createContext();

const Node = () => (
  <div className="node">
    Node
    <SubNode />
  </div>
);
const SubNode = () => (
  <div className="sub-node">
    SubNode
    <Child />
  </div>
);

const Child = () => (
  <div className="child">
    Child
    <hr />
    <Consumer>
      {(value) => <div style={{ color: value }}>Childxxx</div>}
    </Consumer>
  </div>
);

export class App extends Component {
  render() {
    return (
      <Provider value={'pink'}>
        <div className="app">
          <h1>我是App组件</h1>
          <Node />
        </div>
      </Provider>
    );
  }
}
